<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let memoizedState = []
    let cursor = 0
    function useState(initialState) {
      const currentCursor = cursor
      memoizedState[currentCursor] = memoizedState[currentCursor] || initialState
      function setState(newState) {
        memoizedState[currentCursor] = newState
        render()
      }
      return [memoizedState[cursor++], setState]
    }
    function useEffect(callback, depArray) {
      const hasNoDeps = !depArray
      const deps = memoizedState[cursor]
      const hasChangedDeps = deps ? !deps.every((e, i) => e === depArray[i]) : true
      if (hasNoDeps || hasChangedDeps) {
        callback()
        memoizedState[cursor] = depArray
      }
      cursor++
    }
  </script>
</body>

</html>
